<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom-3-结构</title>
</head>
<body>
<div class="login-box">

</div>
</body>
<script>

    /***
     *  1.选择器获得dom节点
     *  2. 创建子节点
     *  3. 把子节点放入父容器中
     * */
    /*
    * 驼峰命名法
    * */
    var loginBox = document.getElementsByClassName('login-box')[0];

    var labelForUsername = document.createElement('label');
    labelForUsername.innerText = "用户名"

    var inputForUsername = document.createElement('input');
    inputForUsername.id = "username";

   var row1=  document.createElement('div');

    row1.appendChild(labelForUsername);
    row1.appendChild(inputForUsername);

    loginBox.appendChild(row1);


</script>
</html>